<template>
  <div class="container">
    <div style="position: relative; padding: 0 0 70px 0; background: #eef0f5" class="dark-top">
      <div class="c-box">
        <!-- 基础信息部分 -->
        <div class="upload-title-box">
          <div class="upload-title">基础信息</div>
          <div style="display: flex; justify-content: flex-start; align-items: center">
            <div class="switch">
              <!-- <el-switch v-model="openSwitch" @change="changeSwitch" />
              <span style="font-size: 16px; margin: 5px">固定</span>
              <el-input-number
                v-model="inputSwitch"
                :disabled="openSwitch"
                size="mini"
                style="width: 80px"
                controls-position="right"
                :min="1"
                :max="4" />
              <span style="font-size: 16px; margin: 5px">行</span> -->
            </div>
            <el-checkbox v-model="showRequired" @change="changeShow">仅展示必填信息</el-checkbox>
          </div>
        </div>
        <hk-form
          ref="hkFormRef1"
          :top="top"
          :is-fixed="isFixed"
          :form-labels="labelArr"
          :rules="formRules"
          :data="formData"
          :dict-list="dictList"
          :btn-hidden="true"
          :disabled="Boolean($route.query.showDetail)"
          label-width="120">
          <template #filter-birthday>
            <div class="sp-flex">
              <el-date-picker
                v-model="formData.birthday"
                style="width: calc(100% - 100px)"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择出生日期"
                :picker-options="pickerOptions"
                @change="calcAge" />
              <el-tag class="tag" effect="plain" size="small">{{ age }}</el-tag>
            </div>
          </template>
          <template #filter-enterDeptType>
            <div class="sp-flex">
              <el-select v-model="formData.enterDeptType" placeholder="请选择" style="width: 100%" @change="changeType">
                <el-option v-for="i in dictList.enterDeptTypeList" :key="i.value" :label="i.label" :value="i.value" />
              </el-select>
            </div>
          </template>
          <template #filter-postIds>
            <el-button
              v-if="!$route.query.showDetail"
              icon="el-icon-thumb"
              style="margin-right: 20px"
              @click="handleSelectData"
              >请选择</el-button
            >
            <span v-if="!formData.userPost.length && $route.query.showDetail">暂无数据</span>
            <hk-table
              v-if="formData.userPost.length"
              :table-data="formData.userPost"
              :table-columns="tableList"
              :show-index="true"
              :total="total"
              :dict-list="dictList"
              :show-pag="false"
              :table-height="80" />
          </template>
        </hk-form>
      </div>
      <div class="c-box">
        <!-- <div class="upload-title-box">
          <div class="upload-title">资格情况</div>
        </div> -->
        <div style="display: flex">
          <i
            v-if="showTable"
            class="el-icon-arrow-down c-box-title"
            style="font-size: 16px"
            @click="showTable = !showTable" />
          <i
            v-if="!showTable"
            class="el-icon-arrow-right c-box-title"
            style="font-size: 16px"
            @click="showTable = !showTable" />
          <div
            class="c-box-title"
            style="font-size: 16px; font-weight: 500; margin-left: 5px; margin-bottom: 10px"
            @click="showTable = !showTable">
            资格情况
          </div>
        </div>
        <template v-if="showTable">
          <hk-table
            v-if="formData.userCredential.length"
            :table-data="formData.userCredential"
            :table-columns="userCredentialList"
            :show-index="true"
            :show-pag="false"
            :dict-list="dictList"
            :is-need-index="true"
            :loading="loading"
            :table-height="80">
            <template #credentialDesc="scope">
              <el-input v-if="!$route.query.showDetail" v-model="scope.row.row.credentialDesc" maxlength="256" />
              <span v-else>{{ scope.row.row.credentialDesc }}</span>
            </template>
            <template #credentialName="scope">
              <div v-if="!$route.query.showDetail">
                <el-button type="text" style="margin-right: 10px" @click="openUpload(scope.row.$index)"
                  >上传文件</el-button
                >

                <span v-if="!scope.row.row.credentialName">支持扩展名：.pdf</span>
                <span v-else>{{ scope.row.row.credentialName }}</span>
              </div>
              <el-link
                v-else
                type="primary"
                target="_blank"
                @click="downloadDoc(scope.row.row.credentialPath, scope.row.row.credentialName)"
                >{{ scope.row.row.credentialName }}</el-link
              >
              <!-- <el-link v-else :href="scope.row.row.certificatePath">{{ scope.row.row.credentialName }}</el-link> -->
            </template>
          </hk-table>
          <el-empty v-else description="暂无数据" />
        </template>
      </div>
      <div v-if="$route.query.showDetail">
        <div class="c-box">
          <div class="upload-title-box">
            <div style="display: flex">
              <i
                v-if="showManage"
                class="el-icon-arrow-down c-box-title"
                style="font-size: 16px"
                @click="showManage = !showManage" />
              <i
                v-if="!showManage"
                class="el-icon-arrow-right c-box-title"
                style="font-size: 16px"
                @click="showManage = !showManage" />
              <div
                class="c-box-title"
                style="font-size: 16px; font-weight: 500; margin-left: 5px; margin-bottom: 10px"
                @click="showManage = !showManage">
                归口管理情况
              </div>
            </div>
            <el-date-picker
              v-model="attributeTime"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="changeAttribute" />
          </div>
          <div v-if="showManage" class="times">
            <div v-if="attributeObj.list.length" class="rows">
              <div class="sections c-box-title">
                <section
                  v-for="(item, index) in showMore ? attributeObj.list : attributeObj.list.slice(0, 4)"
                  :key="index">
                  <div class="iconCol">
                    <i :class="colorSel(item)" />
                    <span>{{ item.putUnderTime }}</span>
                    <u />
                    <span class="type" :class="colorSel(item)">{{ item.putUnderName }}</span>
                  </div>
                  <div class="bottom" :class="colorSel(item)">
                    <template v-if="item.type == 1">
                      <span>名称：{{ item.colloquyName }} &nbsp;</span>
                      <span>时长：{{ item.colloquyDuration }}</span>
                    </template>
                    <template v-else-if="item.type == 2">
                      <span>培训名称：{{ item.trainName }} &nbsp;</span>
                      <span>时长：{{ item.trainDuration }}</span>
                    </template>
                    <template v-else>
                      <span style="width:50%">目的地：{{ item.destination }}</span>
                      <span style="width:50%">时间段：{{ item.destinationTime }}</span>
                      <span style="flex:1">申请原因：{{ item.reason }}</span>
                    </template>
                  </div>
                </section>
              </div>
              <el-button
                v-if="attributeObj.list.length > 4 && !showMore"
                size="mini"
                type="text"
                @click="showMore = true"
                >查看更多</el-button
              >
              <el-button v-if="showMore" size="mini" type="text" @click="showMore = false">收起</el-button>
            </div>
            <el-empty v-else description="暂无记录" />
            <div class="classify c-box-title">
              <div class="iconCol">
                <i />
                <span>保密培训教育</span>
                （{{ attributeObj.trainRecordCount }}）
              </div>
              <div class="iconCol">
                <i class="safe" />
                <span>日常谈心谈话</span>
                （{{ attributeObj.colloquyRecordCount }}）
              </div>
              <div class="iconCol">
                <i class="serious" />
                <span>出入境申请审批</span>
                （{{ attributeObj.entryExitCount }}）
              </div>
            </div>
          </div>
        </div>
        <div v-if="formData.ip" class="c-box c-box-title">
          <div style="display: flex">
            <i
              v-if="showWatch"
              class="el-icon-arrow-down c-box-title"
              style="font-size: 16px"
              @click="showWatch = !showWatch" />
            <i
              v-if="!showWatch"
              class="el-icon-arrow-right c-box-title"
              style="font-size: 16px"
              @click="showWatch = !showWatch" />
            <div
              class="c-box-title"
              style="font-size: 16px; font-weight: 500; margin-left: 5px; margin-bottom: 10px"
              @click="showWatch = !showWatch">
              运维行为监管情况
            </div>
          </div>
          <template v-if="showWatch">
            <event-overview :ip="formData.ip" />
            <event-trend :ip="formData.ip" />
          </template>
        </div>
      </div>
      <footer>
        <div class="div-foot">
          <el-button v-if="!$route.query.showDetail" type="primary" @click="submitForm">保 存</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </footer>
    </div>

    <hk-upload
      ref="import_dia"
      :url="url"
      :title="title"
      :accept="accept"
      auto-submit
      @handleFile="handleFile"
      @submit="handleSubmit">
      <div v-if="fileList.length" class="file-list">
        <div>
          <i class="el-icon-document" />
          <span>{{ fileList[0].name }}</span>
        </div>
        <el-button type="text" @click="fileList.splice(0, 1)">删除</el-button>
      </div>
    </hk-upload>
    <SelectDialog
      ref="selectRef"
      :table-columns="tableList"
      :page-function="productList"
      title="选择运维岗位"
      :check-data="formData.userPost"
      :dict-list="dictList"
      is-multiple
      @handleSubmit="dialogSubmitEvent" />
  </div>
</template>

<script>
import { downloadDoc } from '../../utils'
import { units, listByCode, treeSelect, update, details, add, putUnder } from '@/api/specialProject/personnel'
import { removeAria } from '@/utils/hongke.js'
import HkForm from '@/components/Hk-Form'
import { upload } from '@/utils/request'
import { pageList } from '@/api/specialProject/post'
import HkTable from '@/components/Hk-Table/index.vue'
import SelectDialog from '@/components/SelectDialog/index.vue'
import EventOverview from './EventOverview.vue'
import EventTrend from './EventTrend.vue'
export default {
  components: { HkForm, EventOverview, EventTrend, HkTable, SelectDialog },
  data() {
    return {
      // 表单数据
      // 仅展示必填信息
      showTable: true,
      showManage: true,
      showWatch: true,
      showMore: false,
      showRequired: false,
      exampleArr: [
        {
          credential: '派遣人员审查表',
          credentialDesc: '',
          credentialName: '',
          credentialPath: '',
          remark: '派遣人员审查表',
        },
        {
          credential: '运维人员与运维单位签订满1年以上的劳动合同',
          credentialDesc: '',
          credentialName: '',
          credentialPath: '',
          remark: '劳动合同',
        },
        {
          credential: '运维人员由运维单位正式缴纳社保满1年',
          credentialDesc: '',
          credentialName: '',
          credentialPath: '',
          remark: '社保证明',
        },
        {
          credential: '入岗保密承诺书',
          credentialDesc: '',
          credentialName: '',
          credentialPath: '',
          remark: '入岗保密承诺书',
        },
        {
          credential: '人员入岗申请书',
          credentialDesc: '',
          credentialName: '',
          credentialPath: '',
          remark: '人员入岗申请书或入岗人员更换申请书',
        },
        {
          credential: '入岗人员岗前审查单',
          credentialDesc: '',
          credentialName: '',
          credentialPath: '',
          remark: '入岗人员岗前审查单',
        },
        {
          credential: '安全保密培训登记表',
          credentialDesc: '',
          credentialName: '',
          credentialPath: '',
          remark: '安全保密培训登记表',
        },
        {
          credential: '运维人员无犯罪记录，无不良诚信记录',
          credentialDesc: '',
          credentialName: '',
          credentialPath: '',
          remark: '无犯罪证明',
        },
      ],
      formData: {
        userPost: [],
        userCredential: [
          {
            credential: '派遣人员审查表',
            credentialDesc: '',
            credentialName: '',
            credentialPath: '',
            remark: '派遣人员审查表',
          },
          {
            credential: '运维人员与运维单位签订满1年以上的劳动合同',
            credentialDesc: '',
            credentialName: '',
            credentialPath: '',
            remark: '劳动合同',
          },
          {
            credential: '运维人员由运维单位正式缴纳社保满1年',
            credentialDesc: '',
            credentialName: '',
            credentialPath: '',
            remark: '社保证明',
          },
          {
            credential: '入岗保密承诺书',
            credentialDesc: '',
            credentialName: '',
            credentialPath: '',
            remark: '入岗保密承诺书',
          },
          {
            credential: '人员入岗申请书',
            credentialDesc: '',
            credentialName: '',
            credentialPath: '',
            remark: '人员入岗申请书或入岗人员更换申请书',
          },
          {
            credential: '入岗人员岗前审查单',
            credentialDesc: '',
            credentialName: '',
            credentialPath: '',
            remark: '入岗人员岗前审查单',
          },
          {
            credential: '安全保密培训登记表',
            credentialDesc: '',
            credentialName: '',
            credentialPath: '',
            remark: '安全保密培训登记表',
          },
          {
            credential: '运维人员无犯罪记录，无不良诚信记录',
            credentialDesc: '',
            credentialName: '',
            credentialPath: '',
            remark: '无犯罪证明',
          },
        ],
        postIds: [],
      },
      attributeTime: [],
      tableList: [
        { label: '岗位名称', param: 'postName' },
        { label: '等级', param: 'secLevel' },
        { label: '关联的应用名称', param: 'product' },
      ],
      top: 0,
      firstTop: 0,
      openSwitch: false,
      isFixed: true,
      inputSwitch: 2,
      // 基础信息
      basicArr: [
        {
          label: '人员名称',
          field: 'userName',
          type: 'input',
          maxlength: 50,
        },
        {
          label: '人员编号',
          field: 'userNo',
          type: 'input',
          maxlength: 50,
          disabled: true,
          placeHolder: '自动生成',
          hidden: false,
        },
        {
          label: '身份证号',
          field: 'idCard',
          type: 'input',
          maxlength: 50,
        },
        {
          label: '受雇单位',
          field: 'unitId',
          type: 'select',
          list: 'unitList',
        },
        {
          label: '归口部门',
          field: 'deptId',
          type: 'cascader',
          list: 'deptList',
          props: {
            children: 'children',
            label: 'name',
            value: 'id',
            checkStrictly: false,
            emitPath: false,
          },
        },
        {
          label: '入部类型',
          field: 'enterDeptType',
          type: 'slot',
          list: 'enterDeptTypeList',
          hidden: false,
        },

        {
          label: '离部日期',
          field: 'departureDate',
          type: 'datePicker',
          format: 'yyyy-MM-dd',
          hidden: false,
        },
        {
          label: '性别',
          field: 'sex',
          type: 'select',
          list: 'sexList',
          hidden: false,
        },
        {
          label: '政治面貌',
          field: 'politicalClimate',
          type: 'select',
          list: 'politicalClimateList',
          hidden: false,
        },
        {
          label: '民族',
          field: 'nation',
          type: 'select',
          list: 'nationList',
          hidden: false,
        },

        {
          label: '出生日期',
          field: 'birthday',
          type: 'slot',
        },
        {
          label: '手机号码',
          field: 'phoneNum',
          type: 'input',
          maxlength: 11,
        },
        {
          label: '邮箱地址',
          field: 'email',
          type: 'input',
          maxlength: 50,
          hidden: false,
        },
        {
          label: '状态',
          field: 'status',
          type: 'select',
          list: 'statusArr',
        },
        {
          label: '运维岗位',
          field: 'postIds',
          type: 'slot',
          span: 24,
        },
        {
          label: '涉密等级',
          field: 'secLevel',
          type: 'select',
          list: 'secLevelList',
        },
      ],
      ip: '',
      attributeObj: {
        list: [],
      },
      // 表单校验
      formRules: {
        userName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        // userNo: [{ required: true, message: '不能为空', trigger: 'blur' }],
        idCard: [
          { required: true, message: '不能为空', trigger: 'blur' },
          {
            pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: '身份证号码不正确',
            trigger: 'blur',
          },
        ],
        unitId: [{ required: true, message: '不能为空', trigger: 'change' }],
        deptId: [{ required: true, message: '不能为空', trigger: 'change' }],
        birthday: [{ required: true, message: '不能为空', trigger: 'change' }],
        status: [{ required: true, message: '不能为空', trigger: 'change' }],
        phoneNum: [
          { required: true, message: '不能为空', trigger: 'blur' },
          {
            pattern: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/,
            message: '请输入正确的手机号',
            trigger: 'blur',
          },
        ],
        email: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { pattern: /^\w+@[a-z0-9]+.[a-z]{2,4}$/, message: '请输入正确的邮箱', trigger: 'blur' },
        ],
        postIds: [{ required: true, message: '不能为空', trigger: 'blur' }],
        secLevel: [{ required: true, message: '不能为空', trigger: 'change' }],
      },
      dictList: {
        enterDeptTypeList: [],
        unitList: [],
        deptList: [],
        sexList: [],
        politicalClimateList: [],
        nationList: [],
        statusList: [],
        statusArr: [],
        secLevelList: [],
      },
      queryParams: {
        current: 1,
        size: 10,
      },
      total: 0,
      loading: false,
      id: '',
      userCredentialList: [
        { label: '资格要求', param: 'credential' },
        { label: '满足说明', param: 'credentialDesc', type: 'slot' },
        { label: '证明材料', param: 'credentialName', type: 'slot' },
        { label: '备注', param: 'remark' },
      ],
      tableIndex: undefined,
      filterInfo: {
        fieldList: [
          {
            label: '',
            type: 'input',
            field: 'name',
            placeholder: '请输入项目名称/采购内容/应用名称/服务人员',
            maxlength: 20,
          },
          { label: '', type: 'select', field: 'statusCode', list: 'statusList', placeholder: '请选择项目进展' },
        ],
      },
      fileList: [],
      url: window.baseUrl.action + '/attachment/upload',
      title: '上传资料',
      accept: '.pdf',
      age: '年龄',
      pickerOptions: {
        disabledDate(date) {
          return date > new Date()
        },
      },
      labelArr: [],
    }
  },
  computed: {},
  created() {
    this.labelArr = this.basicArr
    this.getTypes()
    this.getForm()
  },
  async mounted() {
    // var that = this
    this.$nextTick(() => {
      const scrollTop = this.$refs.hkFormRef1.$el.getBoundingClientRect().top

      // 记录元素刚开始的位置
      this.top = scrollTop
      // 记录元素刚开始的位置
      console.log(scrollTop, '第一')
    })
  },
  methods: {
    // 表单项重新赋值
    getTop(e) {
      this.labelArr = e
    },
    // 是否只展示必填项
    changeShow() {
      this.labelArr = []
      if (this.showRequired) {
        var ars = this.basicArr.filter((item) => {
          if (typeof item.hidden !== 'boolean') {
            return item
          }
        })
        this.labelArr = ars
      } else {
        this.labelArr = this.basicArr
      }

      setTimeout(() => {
        this.changeSwitch(this.openSwitch)
      }, 100)
    },
    // 开关固定按钮
    changeSwitch(e) {
      if (e) {
        var scrollTop = this.$refs.formRef.$el.getBoundingClientRect().top
        this.top = scrollTop
        var idx = this.inputSwitch * 2
        this.labelArr.forEach((item, index) => {
          if (index < idx) {
            this.$set(item, 'position', true)
          } else {
            this.$set(item, 'position', false)
          }
        })
      } else {
        this.labelArr.forEach((item, index) => {
          this.$set(item, 'position', false)
        })
      }
    },
    changeType(e) {
      this.formData.enterDeptType = e
      this.formData.status = null
      if (e === '2') {
        // 短期
        var ar = []
        var k = this.dictList.statusList.find((item) => {
          return item.value === '2'
        })
        var j = this.dictList.statusList.find((item) => {
          return item.value === '3'
        })
        ar.push(k)
        ar.push(j)
        this.dictList.statusArr = ar
      } else {
        // 长期
        var arr = []
        var p = this.dictList.statusList.find((item) => {
          return item.value === '0'
        })
        var y = this.dictList.statusList.find((item) => {
          return item.value === '1'
        })
        arr.push(p)
        arr.push(y)
        this.dictList.statusArr = arr
      }
    },
    changeAttribute() {
      const query = {
        id: this.$route.query.id,
        startTime: this.attributeTime?.[0],
        endTime: this.attributeTime?.[1],
      }
      putUnder(query).then((res) => {
        this.attributeObj = res
      })
    },
    colorSel(item) {
      return item.type == 1 ? 'safe' : item.type == 2 ? '' : 'serious'
    },
    async getForm() {
      // await areaList().then(res => {
      //   this.dictList.provinceList = res
      // })
      const id = this.$route.query.id
      this.id = id
      if (id) {
        details(id).then((res) => {
          if (res) {
            this.formData = res
            if (res.userCredential.length === 0) {
              this.formData.userCredential = this.exampleArr
            }
            var arr = res.userPost.map((i) => i.id)
            this.formData.postIds = arr
            console.log(this.formData, '各大电商')
            this.calcAge(this.formData.birthday)
          }
        })
        this.changeAttribute()
      }
      if (this.$route.query.showDetail) {
        // this.getDataList({ id })
      }
    },
    getTypes() {
      treeSelect().then((res) => {
        this.dictList.deptList = this.fn(res)
        this.$nextTick(() => {
          const $el = document.querySelectorAll('.el-cascader-panel .el-cascader-node[aria-owns]')
          Array.from($el).map((item) => {
            item.removeAttribute('aria-owns')
            item.removeAttribute('aria-haspopup')
          })
        })
      })
      units().then((res) => {
        this.dictList.unitList = res.map((i) => {
          return {
            label: i.unitName,
            value: i.id,
          }
        })
      })
      listByCode('secLevel,sex,politicalClimate,status,nation,enterDeptType').then((res) => {
        for (const key in res) {
          this.dictList[key + 'List'] = res[key].map((i) => {
            return {
              label: i.dictValue,
              value: i.dictKey,
            }
          })
        }
        setTimeout(() => {
          this.dictList.statusArr = this.dictList.statusList
        }, 1)
      })
    },
    fn(arr) {
      return arr.map((item) => {
        if (item.children && item.children.length > 0) {
          this.fn(item.children)
        } else {
          delete item.children
        }
        return item
      })
    },
    getDataList() {
      this.loading = true
      // page(Object.assign({}, this.queryParams, this.searchData)).then((res) => {
      //   this.loading = false
      //   this.tableData = res.list
      //   this.total = res.total
      // })
    },

    downloadDoc(url, name) {
      downloadDoc(url, name)
    },
    calcAge(val) {
      const currentYear = new Date().getFullYear() // 当前的年份
      const calculationYear = new Date(val).getFullYear() // 计算的年份
      const wholeTime = currentYear + val.substring(4) // 周岁时间
      const calculationAge = currentYear - calculationYear // 按照年份计算的年龄
      // 判断是否过了生日
      if (new Date().getTime() > new Date(wholeTime).getTime()) {
        this.age = calculationAge
      } else {
        this.age = calculationAge - 1
      }
      this.age += '岁'
    },
    productList(queryParams) {
      return pageList(queryParams)
    },
    handleQuery() {
      this.queryParams.current = 1
      this.getDataList()
    },
    //  重置
    resetQuery() {
      this.queryParams.current = 1
      this.queryParams.size = 10
      this.getDataList()
    },
    /** 关闭弹窗*/
    dialogSubmitEvent(data) {
      this.formData.userPost = data
      var arr = this.formData.userPost.map((i) => i.id)
      this.formData.postIds = arr
      this.$refs.hkFormRef1.setFormData('postIds', arr)
      this.$nextTick(() => {
        this.$refs.hkFormRef1.clearName('formLabels', 'postIds')
      })
    },

    /**  点击 ‘请选择’ **/
    handleSelectData() {
      this.$refs.selectRef.show(this.formData.userPost)
    },
    // 提交事件
    async submitForm() {
      await this.$refs.hkFormRef1.handleFormSubmit('formLabels')
      const res = JSON.parse(JSON.stringify(this.formData))
      res.deptId = Array.isArray(res.deptId) ? res.deptId[res.deptId.length - 1] : res.deptId
      // res.deptId = this.formData.deptId?.[this.formData.deptId?.length - 1] || this.formData.deptId
      if (!this.$route.query.id) {
        add(res).then((res) => {
          this.cancel()
          this.$message.success('新增成功')
        })
      } else {
        update(res).then((res) => {
          this.$message.success('修改成功')
          this.cancel()
        })
      }
    },
    openUpload(index) {
      this.tableIndex = index
      this.fileList = []
      this.$refs.import_dia.show()
    },
    handleFile(file) {
      this.fileList = [file]
    },
    handleSubmit() {
      const form = new FormData()
      this.fileList.forEach((item, key) => {
        form.append('file', item.raw)
      })

      upload(this.url, form)
        .then((res) => {
          // this.$message.success('上传成功')
          this.$refs.import_dia.cancel()
          this.formData.userCredential[this.tableIndex].credentialName = res[0].name
          this.formData.userCredential[this.tableIndex].credentialPath = res[0].url
          this.fileList = []
        })
        .catch((err) => {
          this.fileList = []
          console.log(err)
        })
    },
    // 关闭按钮
    cancel() {
      this.$router.go(-1)
    },
  },
}
</script>

  <style lang="scss" scoped>
.switch {
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-right: 20px;
}
#app.dark-theme {
  .container {
    background: transparent !important;
    // background: #222 !important;
  }
  footer {
    background: #0a183e !important;
  }
  .div-foot {
    background: transparent !important;
  }
  .dark-top {
    background: transparent !important;
  }
  .c-box {
    background: rgba(59, 139, 255, 0.1);
  }
  .sp-flex i {
    color: #4b6eef !important;
  }
  .upload-title-box {
    .upload-title {
      color: #fff !important;
    }
  }
}
.dark-top {
  background-color: #eef0f5;
  overflow: auto;
}
.type {
  color: #4b6eef;
  &.serious {
    color: #ff3535;
  }
  &.safe {
    color: #2cb274;
  }
}
@mixin common-style($bg, $before) {
  position: relative;
  background: rgba($color: #4b6eef, $alpha: $bg);
  &::before {
    content: '';
    position: absolute;
    background: rgba($color: #4b6eef, $alpha: $before);
  }
  &.serious {
    background: rgba($color: #ff3535, $alpha: $bg);
    &::before {
      background: rgba($color: #ff3535, $alpha: $before);
    }
  }
  &.safe {
    background: rgba($color: #2cb274, $alpha: $bg);
    &::before {
      background: rgba($color: #2cb274, $alpha: $before);
    }
  }
}
.tag {
  height: 32px;
  line-height: 32px;
  width: 80px;
  text-align: center;
}
.upload-title-box {
  height: 40px;
  width: 100%;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // border-bottom: 1px solid rgba($color: #000000, $alpha: 8%);

  .upload-title {
    font-size: 16px;
    font-weight: 700;
    color: #000000;
  }
}
.container {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #eef0f5;
}
.c-box {
  background: #fff;
  border-radius: 4px;
  padding: 20px;

  margin-bottom: 20px;
}
.el-form {
  flex: 1;
  // overflow: auto;
}
footer {
  position: fixed;
  bottom: 0;
  right: 20px;
  height: 70px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;

  z-index: 99;
  .div-foot {
    padding: 20px;
    height: 70px;
    line-height: 70px;
    width: 100%;
    // width: calc(100% - 240px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #fff;
  }
}
.add {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  i {
    font-size: 32px;
  }
  p {
    margin-top: 10px;
  }
}
.info-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
.times {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  .el-empty {
    width: 75%;
  }
}
.rows {
  width: 75%;
  font-size: 14px;
  // max-height: 360px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  .sections {
    flex: 1;
    overflow: auto;
  }
  section {
    & + section {
      margin-top: 10px;
    }
    .bottom {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 10px;
      padding: 15px;
      @include common-style(0.06, 1);
      &::before {
        width: 3px;
        height: 100%;
        top: 0;
        left: 2px;
      }
      span {
        display: inline-block;
        word-break: break-all;
        width: 50%;
        margin: 5px 0;
        // margin: 0 20px;
      }
    }
  }
  .el-button {
    width: 50px;
    margin-top: 10px;
    padding: 0 !important;
  }
}
.classify {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  > div {
    margin-bottom: 20px;
  }
}
.empty-box {
  justify-content: center;
  align-items: center;
  display: flex;
}

.iconCol {
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 2px;
  span {
    margin: 0 20px;
  }
  u {
    margin-left: 10px;
    width: 5px;
    height: 5px;
    background: #d8d8d8;
    border-radius: 50%;
  }
  i {
    @include common-style(1, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    &::before {
      width: 13px;
      height: 13px;
      border-radius: 50%;
      // top: -19%;
      // left: -20%;
    }
  }
}
.file-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  span {
    margin-left: 10px;
  }
}
::v-deep {
  .el-upload-list {
    display: none;
  }
  .el-table {
    height: auto;
  }
  .el-input-group__append {
    background: transparent;
  }
  .content {
    width: 100%;
    justify-content: flex-end;
    // margin: -20px 0;
  }
  .configuration-situation {
    border-top: 1px solid #e8e8e8;
    margin-bottom: 0;
    .left {
      border-right: 1px solid #e8e8e8;
    }
  }
}
</style>

